<template>
  <a-modal :title="title" :width="1300" :closable="true" @close="close" @cancel="close" :visible="visible" :footer="null">
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper search-box-cuesList" style="margin-bottom:10px">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="4" :lg="7" :md="6" :sm="24">
                <a-form-item label="文章名称">
                  <j-input placeholder="请输入文章名称" v-model="queryParam.title" />
                </a-form-item>
              </a-col>
              <a-col :xl="4" :lg="7" :md="6" :sm="8">
                <a-form-item label="编撰人">
                  <j-input placeholder="请输入编撰人姓名" v-model="queryParam.author" />
                </a-form-item>
              </a-col>
              <a-col :md="10" :sm="10">
                <a-form-item label="日期">
                  <a-range-picker format="YYYY-MM-DD" @change="onDatePicker" />
                </a-form-item>
              </a-col>
              <a-col :xl="4" :lg="7" :md="4" :sm="6">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search" title="搜索" shape="circle"></a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px" title="重置" shape="circle"></a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- table区域-begin -->
        <div>
          <a-table ref="table" size="middle" bordered :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a @click="handleSet(record)">选择</a>
            </span>
          </a-table>
        </div>
      </a-card>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'
import { queryMyDepartTreeList, searchByKeywords } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput.vue'

export default {
  name: 'SchoolWebCates',
  mixins: [JeecgListMixin],
  components: { JInput },
  data() {
    return {
      title: '选择关联文章',
      visible: false,
      columns: [
        {
          title: '文章ID',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '文章名称',
          align: 'center',
          dataIndex: 'title',
          align: 'left'
        },
        {
          title: '编撰人',
          align: 'center',
          dataIndex: 'author'
        },
        {
          title: '版面',
          align: 'center',
          customRender: r => {
            return r.pagename + r.pagenum
          }
        },
        {
          title: '刊登时间',
          align: 'center',
          dataIndex: 'periodnum'
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      url: {
        list: '/paper/paperLanding/list'
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      userIdentity: '',
      loading: false,
      iExpandedKeys: [],
      autoExpandParent: true,
      queryParam: {
        dictId: '0b5d19e1fce4b2e6647e6b4a22760c14'
      },
      endOpen: false
    }
  },
  created() {},
  methods: {
    close() {
      this.visible = false
    },
    show(taskNodeId) {
      this.visible = true
    },
    handleSet(r) {
      this.close()
      this.$emit('onSelect', r)
    },
    onDatePicker(d, df) {
      this.queryParam.startTime = df[0]
      this.queryParam.endTime = df[1]
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 30px;
  margin-bottom: 30px;
  float: right;
}

.ant-card {
  margin-top: 12px;
}

.ant-card /deep/ .ant-card-body {
  padding: 0 !important;
}
</style>
